<template>
	<view class="main">
		<view class="top">
			<image src="@/static/personalbackground.png" mode="" style="width: 100%;height: 100%;object-fit: cover;">
			</image>

			<view class="avatarBox tc">
				<view class="img-avatar">
					<!-- <image referrer="no-referrer|origin|unsafe-url" :src="imgUrl" mode=""
						style="width: 100%;height: 100%;"></image> -->
					<avatar :name="userInfo.userName || '请登录'" :size="'verybig'" />
				</view>
				<view class="avatarBoxTips" v-if="isLogin">
					<view class="overflow-ellipsis margin-bottom10">
						<text>{{userInfo.userName || ''}} - {{userInfo.grade || ''}}级</text>
					</view>
					<view class="overflow-ellipsis f12">
						<text>{{userInfo.institute || ''}}-{{userInfo.major || ''}}</text>
					</view>
				</view>
				<view class="avatarBoxTips" v-else>
					<view class="overflow-ellipsis margin-bottom10 f12">
						<text>请先绑定教务系统账号</text>
					</view>
				</view>
			</view>



			<view class="water">
				<view class="water-c">
					<view class="water-1"></view>
					<view class="water-2"></view>
				</view>
			</view>
		</view>

		<view class="middle flex-row">
			<view class="middle_item flex-column" @click="favorite">
				<view class="middle_item_top">
					<image src="@/static/favorite.png" mode="" style="width: 100%;height: 100%;object-fit: cover;">
					</image>
				</view>
				<view class="middle_item_bot  f14">收藏</view>
			</view>
			<view class="middle_item flex-column" @click="toRecoder">
				<view class="middle_item_top">
					<image src="@/static/newhistory.png" mode="" style="width: 100%;height: 100%;object-fit: cover;">
					</image>
				</view>
				<view class="middle_item_bot f14">组队</view>
			</view>
			<view class="middle_item flex-column" @click="removeBinds">
				<view class="middle_item_top">
					<image src="@/static/shezhi.png" mode="" style="width: 100%;height: 100%;object-fit: cover;">
					</image>
				</view>
				<view class="middle_item_bot f14">{{isLogin ? '解绑' : '绑定'}}</view>
			</view>
			<view class="middle_item flex-column" @click="notice">
				<view class="middle_item_top">
					<image src="@/static/notice.png" mode="" style="width: 100%;height: 100%;object-fit: cover;">
					</image>
				</view>
				<view class="middle_item_bot f14">公告</view>
			</view>

		</view>
		<view class="bottom">
			<view class="bottom_body">
				<view class="bottom_body_item bt">
					<view class="left">
						<view class="item_left">
							<image src="@/static/studenNum.png" mode="" style="width: 100%;height: 100%;"></image>
						</view>
						<view class="item_left_text f16">个人学号</view>
					</view>
					<view class="flex-row h100">
						<view class="commonText f14">{{userInfo.stuNum || ''}}</view>
						<view class="item_leftjiantou">
							<image src="@/static/rightjiantou.png" mode="" style="width: 100%;height: 100%;"></image>
						</view>
					</view>

				</view>
				<view class="bottom_body_item bt" @click="tocurriculum">
					<view class="left">
						<view class="item_left">
							<image src="@/static/selfJianli.png" mode="" style="width: 100%;height: 100%;"></image>
						</view>
						<view class="item_left_text f16">个人简历</view>
					</view>

					<view class="item_leftjiantou">
						<image src="@/static/rightjiantou.png" mode="" style="width: 100%;height: 100%;"></image>
					</view>
				</view>
				<view class="bottom_body_item bt">
					<view class="left">
						<view class="item_left">
							<image src="@/static/aboutMy.png" mode="" style="width: 100%;height: 100%;"></image>
						</view>
						<view class="item_left_text f16">关于我们</view>
					</view>

					<view class="item_leftjiantou">
						<image src="@/static/rightjiantou.png" mode="" style="width: 100%;height: 100%;"></image>
					</view>
				</view>
				<view class="bottom_body_item bt" @click="feedback">
					<view class="left">
						<view class="item_left">
							<image src="@/static/response.png" mode="" style="width: 100%;height: 100%;"></image>
						</view>
						<view class="item_left_text f16">意见反馈</view>
					</view>

					<view class="item_leftjiantou">
						<image src="@/static/rightjiantou.png" mode="" style="width: 100%;height: 100%;"></image>
					</view>
				</view>
				<view class="bottom_body_item" @click="myNews">
					<view class="left">
						<view class="item_left">
							<image src="@/static/xiaoxi.png" mode="" style="width: 100%;height: 100%;"></image>
						</view>
						<view class="item_left_text f16">我的聊天</view>
					</view>
					<view class="item_leftjiantou">
						<image src="@/static/rightjiantou.png" mode="" style="width: 100%;height: 100%;"></image>
					</view>
				</view>

			</view>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog cancelText="算了" confirmText="去登录" title="温馨提示" content="你还未进行校园登录"
				@confirm="dialogConfirm" ></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import avatar from '@/components/common/avatar/index.vue'
	import mjcrequest from '@/config/request.js'
	import api from '@/config/apis.js'
	export default {
		components: {
			avatar
		},
		data() {
			return {
				isAuthorImage: false,
				isLogin: false,
				token: 0,
				userInfo: null,
				imgUrl: 'https://file.mjcelaine.top/newimages/initImgUrl.jpg'
			};
		},
		methods: {
			notice() {
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/personal/notice/notice'
					});
				}, 0)
			},
			dialogConfirm() {
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/loginWyu/index'
					});
				}, 0)
			},
			dialogToggle() {

				this.$refs.alertDialog.open()
			},
			favorite() {
				if (!this.isLogin) {
					this.$errMessageToast('请先绑定五邑大学账号')
					return
				}
				uni.navigateTo({
					url: "/pages/personal/favorite/favorite"
				})
			},
			myNews() {
				if (!this.isLogin) {
					this.$errMessageToast('请先绑定五邑大学账号')
					return
				}
				uni.navigateTo({
					url: '/pages/personal/mynews/index'
				})
			},
			toRecoder() {
				if (!this.isLogin) {
					this.$errMessageToast('请先绑定五邑大学账号')
					return
				}
				uni.navigateTo({
					url: "/pages/personal/teamHistory/teamHistory"
				})
			},
			chooseavatar(res) {
				if (res.detail.avatarUrl) {
					this.img = res.detail.avatarUrl
					this.$saveStorage('imgUrl', res.detail.avatarUrl)
				}

			},
			feedback() {
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/feedback/index'
					});
				}, 0)
			},
			tocurriculum() {
				if (!this.isLogin) {
					this.$errMessageToast('请先绑定五邑大学账号')
					return
				}
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/curriculum/index'
					});
				}, 0)
			},
			getValue(token) {
				this.token = token
				this.getUser()
			},
			reset() {
				this.isLogin = false
				this.token = ''
				this.userInfo = null
				this.$resetToken()
			},
			async removeBinds() {
				if (!this.isLogin) {
					this.toLogin()
					return
				}
				uni.showModal({
					cancelColor: 'red',
					cancelText: '再想想',
					confirmText: '解绑',
					title: '提示',
					content: '你正在解绑教务系统账号，请确认',
					success: async (res) => {
						if (res.confirm) {
							try {
								console.log(this.token);
								const result = await mjcrequest.request({
									url: api.removeBinders,
									method: 'GET',
									header: {
										token: this.token
									},
									isToast: true
								});
								this.reset()
							} catch (e) {
								//TODO handle the exception
								uni.showToast({
									title: e,
									duration: 850,
									icon: 'error'
								})
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			toLogin() {
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/loginWyu/index'
					});
				}, 0)
			},
			async getUser() {
				try {
					const res = await mjcrequest.request({
						url: api.getUser,
						method: 'GET',
						header: {
							token: this.token,
							"content-Type": "application/json",
						}
					})
					this.userInfo = res
					this.$binduserInfo(res)
					this.$updateToken(this.token)
					console.log(this.$userInfo, 269);
					this.$nextTick(() => {
						this.isLogin = true
					})

				} catch (e) {

					this.$errMessageToast(e)
				}
			}
		},
		created() {
			uni.getStorage({
				key: 'token',
				success: (res) => {
					this.token = res.data
					console.log(res.data,315);
					this.getUser()
				},
				fail: (err) => {
					this.dialogToggle()
					
				}
			});
		}
	}
</script>

<style lang="less">
	.main {
		width: 100%;
		height: 100vh;
		background-color: #f5f5f5;

		.middle {
			background-color: #fff;
			padding: 15px 35rpx 15rpx 35rpx;

			&_item {
				flex: 1;
				align-items: center;

				&_top {
					width: 60rpx;
					height: 60rpx;
				}

				&_bot {
					color: #b0b9bb;
					font-weight: 300;
					margin-top: 5px;
				}
			}
		}

		& .page {
			background: #f6f5f8;
		}

		& .top {
			width: 100%;
			height: 380rpx;
			position: relative;
		}

		& .bottom {
			width: 100%;
			box-sizing: border-box;
			padding: 35rpx 35rpx;
			color: #888;
			height: auto;

			&_body {
				background-color: #fefefe;

				border-radius: 20rpx 20rpx 20rpx 20rpx;
				box-shadow: 0 4px 8px 2px #f0f1f1 !important;

				&_item {
					padding: 35rpx 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					& .left {
						display: flex;
						align-items: center;

						&_text {
							color: #b0b9bb;
							font-weight: 300;

						}
					}

					& .item_left {
						width: 45rpx;
						height: 45rpx;
						margin: 0 15rpx;
					}

					& .item_leftjiantou {
						width: 30rpx;
						height: 30rpx;
						transform: translateY(-2rpx);
					}
				}
			}


		}
	}

	.water {
		position: absolute;
		left: 0;
		bottom: -10px;
		height: 60rpx;
		width: 100%;
		z-index: 1
	}

	.water-c {
		position: relative
	}

	.water-1 {
		background: url("") repeat-x;
		background-size: 600px;
		-webkit-animation: wave-animation-1 3.5s infinite linear;
		animation: wave-animation-1 3.5s infinite linear
	}

	.water-2 {
		top: 5px;
		background: url("") repeat-x;
		background-size: 600px;
		-webkit-animation: wave-animation-2 6s infinite linear;
		animation: wave-animation-2 6s infinite linear
	}

	.water-1,
	.water-2 {
		position: absolute;
		width: 100%;
		height: 60rpx
	}

	.back-white {
		background: #fff
	}

	@keyframes wave-animation-1 {
		0% {
			background-position: 0 top
		}

		100% {
			background-position: 600px top
		}
	}

	@keyframes wave-animation-2 {
		0% {
			background-position: 0 top
		}

		100% {
			background-position: 600px top
		}
	}

	//


	.avatarBox {
		width: 100%;
		height: auto;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		left: 50%;
		height: auto;
	}

	.avatarBoxTips {
		padding: 0 80rpx;
	}

	.img-avatar {
		display: inline-block;
		overflow: hidden;
		width: 128rpx;
		height: 128rpx;
		margin: 29rpx 29rpx 5rpx 29rpx;
		border-radius: 50%;
		box-shadow: 4px 4px 4px -4px #7c7c7e;
	}
</style>
